<template>
  <view class="home flex column">
    <!-- 搜索框 -->
    <view class="search">
      <u-search
        placeholder="请输入安装地点"
        v-model="searchData.name"
        shape="square"
        bg-color="#E5EAE8"
        height="80"
        :show-action="true"
        :animation="true"
        :input-style="{ marginLeft: '20rpx' }"
        :search-icon="searchSrc"
        placeholder-color="#999999"
        :action-style="{
          color: '#369164',
          fontSize: '14px',
          fontWeight: '400',
        }"
        @search="handleSearch"
        @custom="handleSearch"
        @change="handleSearch"
      ></u-search>
    </view>
    <!-- 列表 -->
    <scroll-view
      :scroll-y="true"
      class="container item one"
      refresher-enabled="true"
      :refresher-triggered="triggered"
      :refresher-threshold="50"
      refresher-background="#F5F5F5"
      @refresherrefresh="onRefresh"
      @refresherpulling="onPulling"
      @refresherrestore="onRestore"
      @refresherabort="onAbort"
      @scrolltolower="onScrollToLower"
    >
      <view class="container-body">
        <template v-if="list && list.length">
          <u-card
            :border="false"
            box-shadow="0px 0px 8px #ddd6d6"
            :body-style="{ padding: '0 30rpx 10rpx' }"
            :head-border-bottom="false"
            v-for="(item, index) in list"
            :key="index"
            :class="getClassName(item)"
          >
            <view slot="head">
              <view class="card-row u-flex u-row-between">
                <view class="card-row-title t-title f-bold">
                  {{
                  item.areaLocation
                  }}
                </view>
              </view>
            </view>
            <view slot="body">
              <view class="card-row u-flex u-row-between u-m-b-30">
                <view class="card-row-title t-section">
                  监测值：{{
                  item.cd_value !== null ? item.cd_value + item.unitCode : ""
                  }}
                </view>
                <view class="card-row-title">
                  <u-tag
                    size="mini"
                    border-color="#FF9A30"
                    bg-color="#fff"
                    color="#FF9A30"
                    shape="circle"
                    @click="goto('1',item)"
                    text="历史曲线"
                  />
                </view>
              </view>
              <view class="card-row u-flex" v-if="item.cdState">
                <view v-if="ids.includes(item.cdState)" class="tag">
                  <text>报警</text>
                </view>
                <view v-else-if="item.cdState === '4'" class="card-row-title u-p-b-10 t-light-green">标校</view>
                <view v-else class="card-row-title u-p-b-10 t-light-green">{{returnText(item)}}</view>
              </view>
            </view>
          </u-card>
          <view class="p-t-10 p-b-10">
            <u-loadmore :status="status" />
          </view>
        </template>
        <template v-if="showEmpty">
          <view class="c-empty p-absolute-center">
            <u-empty text="暂无数据"></u-empty>
          </view>
        </template>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  name: 'index',
  props: {
    data: {
      type: Object,
      default: () => {
        return {}
      }
    },
    coalMineName: {
      type: String,
      default: () => {
        return ''
      }
    }
  },
  data() {
    return {
      searchData: {
        name: '',
        mineNo: '',
        pageSize: 20,
        pageNumber: 1,
        sensorType: '',
        status: '',
        title: '3' // 3:瓦斯抽采,2:安全监控
      },
      tagColor: ['#49BDCC', '#dd524d'],
      background: {
        backgroundColor: '#F8F8F8'
      },
      searchSrc: require('@/static/image/search_icon.svg'),
      triggered: false, // 下拉刷新
      showEmpty: false,
      status: 'loading',
      list: [],
      ids: ['1', '2', '5'],
      btnList: [
        { id: '0', label: '正常', checked: false },
        { id: '1', label: '超限报警', checked: false },
        { id: '2', label: '断电报警', checked: false },
        { id: '4', label: '标校', checked: false },
        { id: '5', label: '标校报警', checked: false },
        { id: '8', label: '超量程', checked: false },
        { id: '16', label: '分站故障', checked: false },
        { id: '32', label: '不巡检', checked: false },
        { id: '64', label: '暂停', checked: false },
        { id: '128', label: '传感器故障', checked: false }
      ]
    }
  },
  methods: {
    returnText(item) {
      for (let i = 0; i < this.btnList.length; i++) {
        if (item.cdState === '0') return
        if (this.btnList[i].id === item.cdState) {
          return this.btnList[i].label
        }
      }
    },
    getClassName(item) {
      let name = ''
      if (this.ids.includes(item.cdState)) {
        name = 'bg-class-one'
      } else if (item.cdState === '4') {
        name = 'bg-class-two'
      } else if (item.cdState && item.cdState !== '0') {
        name = 'bg-class-three'
      }
      return name
    },
    /**
     * 初始化
     */
    init() {
      this.list = []
      this.searchData.pageNumber = 1
      this.status = 'loading'
      this.showEmpty = false
    },
    goto(id, item) {
      let url = ``
      if (id === '1') {
        url = `/pages/alarmConfirm/history/history?data=${JSON.stringify(item)}&type='2'&coalMineName=${this.coalMineName}`
      } else {
        url = `/pages/monitoring/realTime?data=${JSON.stringify(item)}&coalMineName=${this.coalMineName}`
      }
      uni.navigateTo({
        url: url
      })
    },
    /**
     * 请求数据
     */
    async getData() {
      const res = await this.$post('/monitor/realTimeAq/getCDSSPageOld', this.searchData)
      if (res && res.body.content) {
        this.list = this.searchData.pageNumber === 1 ? res.body.content : this.list.concat(res.body.content)
        // 到底了
        if (res.body.content.length < this.searchData.pageSize) {
          this.status = 'nomore'
        }
        // 数据空
        if (this.searchData.pageNumber === 1 && this.list && this.list.length === 0) {
          this.showEmpty = true
        } else {
          this.showEmpty = false
        }
      }
    },
    /**
     * 搜索
     */
    handleSearch() {
      if (this.searchTimer) {
        clearTimeout(this.searchTimer)
      }
      this.searchTimer = setTimeout(() => {
        this.init()
        this.getData()
      }, 300)
    },
    /**
     * 上拉加载
     */
    onScrollToLower() {
      if (this.status === 'loading') {
        this.searchData.pageNumber++
        this.getData()
      }
    },
    onPulling(e) {},
    onRefresh() {
      if (this.Isfreshing) return
      this.Isfreshing = true
      if (!this.triggered) {
        // 保证刷新状态下，triggered为true
        this.triggered = true
        this.init()
        this.getData()
        setTimeout(() => {
          this.triggered = false // 触发onRestore，关闭刷新图标
          this.Isfreshing = false
        }, 1200)
      }
    },
    onRestore() {},
    onAbort() {}
  },
  mounted() {
    this.searchData.mineNo = this.data.enCode
    uni.$on('handClickSafeScreen', res => {
      if (res.sensorType) {
        this.$set(this.searchData, 'sensorType', res.sensorType)
      } else {
        this.$set(this.searchData, 'sensorType', '')
      }
      if (res.status) {
        this.$set(this.searchData, 'status', res.status)
      } else {
        this.$set(this.searchData, 'status', '')
      }
      this.$nextTick(() => {
        this.getData()
      })
    })
    this.$nextTick(() => {
      this.getData()
    })
  },
  destroyed() {
    // 清除监听keyword
    uni.$off('handClickSafeScreen')
    uni.removeStorageSync('handClickSafeScreen')
  }
}
</script>

<style lang="scss" scoped>
.home {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  /* 搜索框 */
  .search {
    padding: 20rpx 28rpx;
  }
  .bg-class {
    &-one {
      background-color: #f8e5e3;
    }
    &-two {
      background-color: #e5f0eb;
    }
    &-three {
      background-color: #faf0e6;
    }
  }
  .tag {
    position: relative;
    bottom: -10rpx;
    left: -30rpx;
    padding: 10rpx 28rpx;
    margin-top: -10rpx;
    border-bottom-left-radius: 20rpx;
    border-top-right-radius: 20rpx;
    background: #f12917;
    color: #fff;
  }
}
</style>
